<template>
	<div class="tree-item">
		<!-- 节点头部：左右布局 -->
		<div class="item-header" @click="toggle">
			<!-- 左侧：如果有子节点则显示箭头；后接任务标题 -->
			<div class="left">
				<text v-if="hasChildren" class="arrow">
					{{ item.expanded ? '▼' : '▶' }}
				</text>
				<text class="title">{{ item.title }}</text>
			</div>
			<!-- 右侧：显示任务状态和任务时间 -->
			<div class="right">
				<text class="time">{{ item.time }}</text>
				<van-tag class="status" type="primary" v-if="item.status === '超期完成'">{{item.status}}</van-tag>
				<van-tag class="status" type="success" v-if="item.status === '按期完成'">{{item.status}}</van-tag>
				<van-tag class="status" type="danger" v-if="item.status === '延迟'">{{item.status}}</van-tag>
				<van-tag class="status" type="warning" v-if="item.status === '进行中'">{{item.status}}</van-tag>
				<van-tag class="status" type="warning" v-if="item.status === '未开始'">{{item.status}}</van-tag>
			</div>
		</div>
		<!-- 子节点区域：如果存在子节点且当前节点处于展开状态 -->
		<div class="children" v-if="hasChildren && item.expanded">
			<TreeItem v-for="child in item.children" :key="child.id" :item="child" />
		</div>
	</div>
</template>

<script setup>
	/*
  为了让组件可以递归调用自身，
  需要给组件显式定义名称。Vue 3.3+ 中可直接使用 defineOptions。
  注意：请确保项目使用的 Vue 版本支持此语法。
*/
	defineOptions({
		name: 'TreeItem'
	});

	import {
		computed
	} from 'vue';

	// 接收单个任务节点数据，要求数据结构包含：
	// id, title, status, time, expanded, children
	const props = defineProps({
		item: {
			type: Object,
			required: true
		}
	});

	// 如果 item.children 数组存在且长度大于 0，则表示有子节点
	const hasChildren = computed(() => {
		return props.item.children && props.item.children.length > 0;
	});

	// 切换展开状态
	function toggle() {
		if (hasChildren.value) {
			// 通过修改 item.expanded 来控制显示或折叠
			props.item.expanded = !props.item.expanded;
		}
	}
</script>

<style scoped lang="scss">
	.tree-item {
		margin-left: $uni-space-default-20;

		.item-header {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding: 10rpx;
			border-bottom: 1px solid $uni-border-color;
			background-color: $uni-bg-color;
			height: 60rpx;
			line-height: 60rpx;

			.left {
				display: flex;
				flex-direction: row;
				align-items: center;

				.arrow {
					margin-right: 10rpx;
					font-size: $uni-font-size-26-rpx;
					color: $uni-text-color;
				}

				.title {
					font-size: $uni-font-size-26-rpx;
					color: $uni-text-color;
				}
			}

			.right {
				display: flex;
				flex-direction: row;
				gap: 10px;
				font-size: 12px;
				color: $uni-text-color;
			}
		}

	}
</style>